<script setup lang="ts">
// https://github.com/SortableJS/Vue.Draggable
//导入draggable组件
import Draggable from 'vuedraggable'
import { ref } from 'vue'
// 拖拽1
let dragging = ref(false);
let list = ref()
list.value = [
    {
        id: 0,
        name: '苹果',
    }, {
        id: 1,
        name: '柠檬'
    }, {
        id: 2,
        name: '菠萝'
    }
]


// 拖拽2
let list1 = ref([
    { name: "John", id: 1 },
    { name: "Joao", id: 2 },
    { name: "Jean", id: 3 },
    { name: "Gerard", id: 4 }
])

let list2 = ref([
    { name: "Juan", id: 5 },
    { name: "Edgard", id: 6 },
    { name: "Johnson", id: 7 }
])

// other
// https://juejin.cn/post/6844904150350692366#heading-3
// https://sortablejs.github.io/vue.draggable.next/#/table-column-example


// 首页 大屏 
// 表格页
// 表单页
// 其他常规
</script>
<script lang="ts">
export default {
    name: 'page3_2'
}
</script>
    
<template>
    <div>
        <h1><span class="iconfont" >&#xe601;</span>拖拽1</h1>
        <!--使用draggable组件-->
        <div>{{dragging?'拖拽中':'拖拽停止'}}</div>
        <draggable :list="list" item-key="name" :disabled="false" :sort="true" :animation="100" class="list-group"
            @start="dragging = true" @end="dragging = false">
            <template #item="{ element }">
                <div class="list-group-item">
                    {{ element.name }}
                </div>
            </template>
        </draggable>

        <h1><span class="iconfont" >&#xe60b;</span>拖拽2</h1>
        <!--使用draggable组件-->
        <div class="draggable2">
            <div>
                <draggable class="list-group" :list="list1" group="people" itemKey="name">
                    <template #item="{ element, index }">
                        <div class="list-group-item">{{ element.name }} {{ index }}</div>
                    </template>
                </draggable>
            </div>

            <div>
                <draggable class="list-group" :list="list2" group="people" itemKey="name">
                    <template #item="{ element, index }">
                        <div class="list-group-item">{{ element.name }} {{ index }}</div>
                    </template>
                </draggable>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.draggable2{
    display: flex;
    >div{
        padding : 5px;
        width: 100px;
        border:1px solid black;
    }
}
.dragList {
    width: 500px;
    height: 300px;
    padding: 20px;
}

.dragList-list1 {
    width: 120px;
}

.list-complete-item1 {
    cursor: pointer;
    font-size: 14px;
    padding: 0 12px;
    display: inline-block;
    margin-bottom: 10px;
    width: 100px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #bfcbd9;
    transition: all 1s;
}

.dragArea1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dragList-list2 {
    margin-top: 20px;
    height: 200px;
    border: 1px solid #8a8a8a;
}

.dragArea2 {
    display: flex;
    align-items: center;
}

.list-complete-item2 {
    cursor: pointer;
    font-size: 14px;
    padding: 0 12px;
    display: inline-block;
    margin: 10px;
    width: 100px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #bfcbd9;
    transition: all 1s;
}
</style>